<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Symfony2 Translations Editor</title>

        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style>
            body { padding-top: 70px; }
            .navbar {box-shadow: 0 0 5px #CBCBCB;}
            .high {background: none repeat scroll 0 0 #FFED54};
        </style>
        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="../assets/ico/favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/assets/ico/apple-touch-icon-57-precomposed.png">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>

    <body>
        <!-- Navigation top bar -->
        <nav class="navbar navbar-default navbar-fixed-top col-sm-12" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SF2 Translation Editor</a>
            </div>
            <div class="collapse navbar-collapse" id="nav-collapse">
                <ul class="nav navbar-nav">
                  <li><a href="#" id="nav-new-locale">New Locale</a></li>
                  <li><a href="#" id="nav-new-entry">New Entry</a></li>
                  <li><a href="#" id="nav-reload">Reload List</a></li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Filter Alias or Value" onkeyup="showFilterEntries(this.value)">
                  </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="https://github.com/servergrove/TranslationEditorBundle">About</a></li>
                </ul>
            </div>
        </nav>

        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <div style="position:fixed">
                    <div class="panel panel-info">
                        <div class="panel-heading">Available Locales</div>
                        <div class="">
                            <ul id="locales" style="padding: 0; margin: 0; list-style: none" class="list-group">
                                {% for locale in localeList %}
                                <li id="locale-{{loop.index}}" data-id="{{ locale.getId() }}" data-index="{{loop.index}}" class="list-group-item">
                                    <button id="remove-locale-{{loop.index}}" type="button" class="close" aria-hidden="true">&times;</button>
                                    {{locale}}
                                    {% if locale == defaultLocale %}<span class="label label-primary">Default</span>{%endif%}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>

                {% block sidebar %}
                {% endblock %}
                </div>
                <hr>
                <footer class="center-content">
                    <p>&copy; ServerGrove 2012</p>
                </footer>
                </div>
            </div>
            <div class="col-sm-10">
                {% block body %}
                {% endblock %}
            </div>
        </div>

        <script>
        $(document).ready(function () {
            $('#locales input').click(function(e) {
                var li = $(e.target).parent();
                confirm('Are you sure?') && removeLocale(li.data('index'), li.data('id'));
            });
            function showLocaleForm() {

            }
            $('#nav-new-locale').on('click', function() {
                $('.alert-message').hide();
                $('#newtranslation').hide();
                $('#newtranslation form').hide();

                $('#newlocale').fadeIn(500);
                var form = $('#newlocale form').slideDown(500);
                $('#language', form).focus();
            });
            $('#nav-new-entry').on('click', function() {
                $('.alert-message').hide();
                $('#newlocale').hide();
                $('#newlocale form').hide();

                $('#newtranslation').fadeIn(500);
                var form = $('#newtranslation form').slideDown(500);
                $('#domain', form).focus();
            });
            $('#nav-reload').on('click', function() {
                this.innerHTML = 'Reloading...';
                window.location.reload();
            });
            $('.cancel-top-form').on('click', function(e) {
                e.preventDefault();
                $('.alert-message').hide();
                var panel = $('.panel-top-form:visible');
                panel.find('form').slideUp();
                panel.fadeOut(500);
            });
        });
        </script>
    </body>
</html>
